<!--
 * @Author: actor
 * @Date: 2023-11-15 18:28:59
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-20 13:57:38
 * @FilePath: \i-hos-app\shared\emr\src\views\rpo\Rpo.vue
 * @Description: 电子病历知识库
-->
<template>
  <div class="rpo">
    <!-- 左侧菜单栏目 -->
    <TreeList
      :data="state"
      @updateCategory="getUpdateCategory"
      @removeCategory="getRemoveCategory"
      @commitAddCategory="getCommitAddCategory"
    />

    <!-- 右侧主体内容 -->
    <Main class="rpo_main">
      <RpoMain />
    </Main>
  </div>
</template>

<script setup lang="ts">
  import { reactive, getCurrentInstance, watch } from 'vue'
  import { useRoute, RouteMeta } from 'vue-router'

  // 自定义组件
  import TreeList from '../../components/common/treeList.vue'
  import RpoMain from './rpoMain.vue'

  // 配置类型约束
  import { IPageShare, IStateSet } from '../../interface/pageShare'
  // 仓库数据以及解构store的配置数据
  import { useEmrPageShare } from '../../store/emrPageShare'
  const emrPageShare: IPageShare = useEmrPageShare()

  // 初始化配置
  const { proxy } = getCurrentInstance() as any,
    route = useRoute(),
    state: IStateSet = reactive({
      type: '知识库', // 树菜单标题
      isHandletree: true, // 是否可以动态新增编辑删除树菜单
      treeData: [], // 树菜单数据
      filterTreeData: [],
      treeDataDefaultProps: {
        // 树菜单默认绑定的字段
        children: 'childList',
        label: 'emrKnowledgeBaseCategoryName',
        id: 'emrKnowledgeBaseCategoryId',
      },
    })

  // 初始化获取知识库的分类
  const fetchCategory = (flag?: String) => {
    const url: String = APP_GLOBAL.API['EMR']['category-query-keyword']
    proxy.$http.requestJSON('post', url, !!flag ? flag : '').then((res: any) => {
      if (res.data) {
        // 给第一次大类绑一个id
        // 默认的时候展开第一个大的分类，并且返回大类对应的所有列表信息
        for (let item of res.data) {
          item.id = item.emrKnowledgeBaseCategoryId
        }
        state.treeData = res.data
        if (!!flag) state.filterTreeData = res.data
        // 默认第一个分类为选中状态
        emrPageShare.$patch((state: IPageShare): void => {
          state.activetreeList = res.data[0]
        })
        // 获取选中的表格的数据
        emrPageShare.fetchCategoryTable(proxy)
      }
    })
  }
  // fetchCategory()

  // 通过关键字搜索更新树菜单
  const getUpdateCategory = (flag?: String) => fetchCategory(flag)

  // 删除分类
  const getRemoveCategory = (flag: any): void => {
    const url: string = APP_GLOBAL.API['EMR']['category-query-remove']
    proxy.$http.requestJSON('post', url, flag).then((res: any) => {
      if (res.data) fetchCategory()
    })
  }
  // 添加或这编辑
  const getCommitAddCategory = (flag: any): void => {
    const url: string = APP_GLOBAL.API['EMR']['category-query-saveOrUpdate']
    proxy.$http.requestJSON('post', url, flag).then((res: any) => {
      if (res.data) fetchCategory()
    })
  }

  // 监听路由变化，重新获取分类数据
  watch(
    (): RouteMeta => route.meta,
    (newValue: RouteMeta): void => {
      emrPageShare.$patch((state: IPageShare): void => {
        state.tableList = []
      })
      if (newValue.title == '知识库') fetchCategory()
    },
    { immediate: true }
  )
</script>

<style lang="scss" scoped>
  .rpo {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    &_main {
      flex: 1;
      height: 100%;
      padding: 0;
    }
  }
  :deep(.el-dialog__header) {
    margin-right: 0;
    .el-dialog__title {
      font-size: 14px;
    }
  }
  :deep(.el-dialog__body) {
    padding-top: 15px;
    padding-bottom: 15px;
  }
</style>
